import { PageContainer } from '@ant-design/pro-components';
import React, { useEffect, useState } from 'react';
import {Button, Card, Descriptions, Form, message, Input, Divider} from 'antd';

import { useModel } from 'umi';
import { useParams } from 'umi';
import {
  getInterfaceInfoByidUsingGet,
  invokeInterfaceInfoUsingPost,
  updateInterfaceInfoUsingPost //假设你有一个更新数据的API
} from "@/services/zhudiApi-backend/interfaceController";

/**
 * 主页
 * @constructor
 */
const Index: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  // @ts-ignore
  const  user =initialState.loginUser;
  const [, setLoading] = useState(false);
  const [data, setData] = useState<API.InterfaceVO>();
  const [invokeRes, setInvokeRes] = useState<any>();
  const [invokeLoading, setInvokeLoading] = useState(false);

  const params = useParams();

  const loadData = async () => {
    if (!params.id) {
      message.error('参数不存在');
      return;
    }
    setLoading(true);
    try {
      const res = await getInterfaceInfoByidUsingGet({
        id: Number(params.id),
      });
      setData(res.data);
    } catch (error: any) {
      message.error('请求失败，' + error.message);
    }
    setLoading(false);
  };

  useEffect(() => {
    loadData();
  }, []);

  const onFinish = async (values: any) => {
    // @ts-ignore
    if(user.role === 1) {
      if (!params.id) {
        message.error('接口不存在');
        return;
      }
      setInvokeLoading(true);
      try {
        const res = await updateInterfaceInfoUsingPost({
          id: params.id,
          ...values,
        });
        if(res.data){
          message.success('更新成功');
          await loadData();
        }
      } catch (error: any) {
        message.error('操作失败，' + error.message);
      }
      setInvokeLoading(false);
    }else{
      if (!params.id) {
        message.error('接口不存在');
        return;
      }
      setInvokeLoading(true);
      try {
        const res = await invokeInterfaceInfoUsingPost({
          id: params.id,
          ...values,
        });
        setInvokeRes(res.data);
        message.success('请求成功');
      } catch (error: any) {
        message.error('操作失败，' + error.message);
      }
      setInvokeLoading(false);
    }
  };

  // @ts-ignore
  return (
    <PageContainer title="查看接口文档">
      <Card>
        {user?.role === 1&&data ? (
          <Form
            name="invoke"
            layout="vertical"
            initialValues={data}
            onFinish={onFinish}
          >

            <Form.Item label="接口状态" name="status">
              <Input />
            </Form.Item>
            <Form.Item label="描述" name="description">
              <Input  />
            </Form.Item>
            <Form.Item label="请求地址" name="url">
              <Input />
            </Form.Item>
            <Form.Item label="请求方法" name="method">
              <Input />
            </Form.Item>
            <Form.Item label="请求参数" name="parameter">
              <Input />
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit" loading={invokeLoading}>
                提交修改
              </Button>
            </Form.Item>
          </Form>
        ) : (
          //否则，展示数据详情
          data ? (
            <Descriptions title={data.name} column={1}>
              <Descriptions.Item label="接口状态">{data.status ? '开启' : '关闭'}</Descriptions.Item>
              <Descriptions.Item label="描述">{data.description}</Descriptions.Item>
            <Descriptions.Item label="请求地址">{data.url}</Descriptions.Item>
            <Descriptions.Item label="请求方法">{data.method}</Descriptions.Item>
            <Descriptions.Item label="请求参数">{data.parameter}</Descriptions.Item>
            <Descriptions.Item label="请求头">{data.requestHeader}</Descriptions.Item>
            <Descriptions.Item label="响应头">{data.responseHeader}</Descriptions.Item>
            <Descriptions.Item label="创建时间">{data.createTime}</Descriptions.Item>
            <Descriptions.Item label="更新时间">{data.updateTime}</Descriptions.Item>
          </Descriptions>
        ) : (
          <>接口不存在</>
          ))}
      </Card>
      <Divider />
      <Card title="在线测试">
        <Form name="invoke" layout="vertical" onFinish={onFinish}>
          <Form.Item label="请求参数" name="userRequestParams">
            <Input.TextArea />
          </Form.Item>
          <Form.Item wrapperCol={{ span: 16 }}>
            <Button type="primary" htmlType="submit">
              调用
            </Button>
          </Form.Item>
        </Form>
      </Card>
      <Divider />
      <Card title="返回结果" loading={invokeLoading}>
        {invokeRes}
      </Card>
    </PageContainer>
  );
};

export default Index;
